<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/axios.min.js"></script>
    <script src="/js/query.js"></script>
    <script>
        window.onload = function (){
            setLoginInfo();
            findByItem(1);
        }

        function  findByItem(pageNO){
            axios.get("/product/findByItem",{
                params: {
                    pageNO,
                    name:$("nameTxt").value
                }
            }).then(resp =>{
                var info = resp.data;
                var str = "";
                info.list.forEach(n =>{
                    str += `<div style="width: 200px;height: 300px;">
                        <img src='/img/product/${n.imgPath}' width="100" height="100"><br>
                        商品名：${n.name}<br>
                        单价：${n.price}<br>
                        评论：${n.speakNum}<br>
                        <input type="button" value="查看" onclick="location.href='/speak.html?id=${n.id}'">
                        </div>`;
                });
                $("productDiv").innerHTML = str;

                var cutStr = "";
                for(var i=1;i<=info.totalPage;i++){
                    cutStr += `<a href="javascript:findByItem(${i})" style="margin-left: 10px">${i}</a>`;
                }

                $("cutDiv").innerHTML = cutStr;
            })
        }

        /**
         * 显示登陆信息
         */
        function setLoginInfo(){
            axios.get("/user/getLoginUser").then(resp=>{
                var info = resp.data;
                if(info == ''){
                    $("loginDiv").innerHTML = "对不起，请先<a href='/login.html'>登陆</a>";
                }
                else{
                    $("loginDiv").innerHTML = "欢迎光临，"+info.userName;
                }
            });
        }

    </script>
</head>
<body>
    <div id="loginDiv"></div>
    <div id="productDiv" style="display: flex;"></div>
    <div id="cutDiv"></div>
    商品名：<input type="text" id="nameTxt">
    <input type="button" value="搜索" onclick="findByItem(1)">
</body>
</html>